<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>空间数据首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui-v2.4.5/layui/css/layui.css">
    <link rel="stylesheet" href="font/iconfont/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="jQueryUI/jquery-ui.css">
    <link rel="stylesheet" href="css/eleTree.css">
    <script src="jQuery/jquery-2.2.3.min.js"></script>
    <script src="jQueryUI/jquery-ui.js"></script>
    <script src="interact/interact.min.js"></script>
</head>
<body class="layui-layout-body">
<div id="layui-layout-admin" class="layui-layout layui-layout-admin">

    <!--头部-->
    <div class="layui-header">
        <div class="header-inset">
            <div class="layui-logo"><img src="img/index-title.png"></div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a href="javascript:;"><span>2018年11月27日</span>&nbsp;&nbsp;<span>你好<i style="font-style: normal">管理员</i></span></a></li>
                <li class="layui-nav-item"><a href="javascript:;"><span class='login-out'>退出</span></a></li>
                <li class="layui-nav-item more-hide">
                    <a href="javascript:;"><img class="more-pro" src="img/more-pro.png"></a>
                    <dl class="layui-nav-child nav-item-child">
                        <dd><a href="javascript:;">选项1</a></dd>
                        <dd><a href="javascript:;">选项2</a></dd>
                        <dd><a href="javascript:;">选项3</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <!--左侧搜索框-->
    <!--<div class="secrch-body">-->
        <!--<input placeholder="请输入查找内容">-->
        <!--<i class="iconfont icon-search "></i>-->
    <!--</div>-->

    <div class="local">
        <div class="hamburger" id="hamburger-1" onclick="menuToggle()"> <span class="icon-line"></span> <span class="icon-line"></span> <span class="icon-line"></span> </div>
        <span style="margin: 0 6px 0 20px;"><i class="iconfont icon-area-ana" onclick="dropDown('.dropDown')"></i>陕西省西安市</span>
        <span onclick="openModal('','','#modal1','none')" style="cursor: pointer">弹框按钮</span>
        <span style="cursor: pointer" onclick="fadeIn('.floor-box')">楼层按钮</span>
        <span style="cursor: pointer" onclick="animation()">轨迹播放</span>
        <div class="dropDown">
            组织信息选择
        </div>
    </div>
    <!--左侧菜单列表 start-->
    <div class="left-side-box">
        <!--左侧菜单-->
        <div class="layui-side layui-bg-black side-bg">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree custom-menu"  lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed btn-tips"  btn-name="按钮1"><a href="javascript:;"><img src="img/menu1.png"></a></li>
                    <li class="layui-nav-item btn-tips"  btn-name="按钮2"><a href="javascript:;"><img src="img/menu2.png"></a></li>
                    <li class="layui-nav-item btn-tips" btn-name="按钮3"><a href="javascript:;"><img src="img/menu3.png"></a></li>
                    <li class="layui-nav-item btn-tips" btn-name="按钮4"><a href="javascript:;"><img src="img/menu4.png"></a></li>
                    <li class="layui-nav-item btn-tips" btn-name="按钮5"><a href="javascript:;"><img src="img/menu5.png"></a></li>
                    <li class="layui-nav-item btn-tips" btn-name="按钮6"><a href="javascript:;"><img src="img/menu6.png"></a></li>
                    <li class="layui-nav-item btn-tips"  btn-name="按钮7"><a href="javascript:;"><img src="img/menu7.png"></a></li>
                    <li class="layui-nav-item btn-tips" btn-name="按钮8"><a href="javascript:;"><img src="img/menu8.png"></a></li>

                </ul>
            </div>
        </div>

        <!--左侧菜单打开后展示区域-->
        <div class="layui-side layui-bg-black left-side" style="display: none;">
            <!--文字标题等内容-->
            <div class="top-side">
                <!--文字加搜索框组件-->
                <div class="input-box">
                    <label class="form-label">网格员轨迹</label>
                    <div class="input-inline"><input type="text" class="full-width"><i class="iconfont icon-search pos-right"></i></div>
                    <i onclick="fadeOut('.left-side')" class="iconfont icon-show-menu" style="position: absolute;right: 12px;top: 12px;"></i>
                </div>
            </div>
            <!--列表区域-左侧tab切换-->
            <div class="layui-side-scroll center-side">
                <!--人员信息组件-->
                <div class="person-card">
                    <div class="person-card-header">
                        <span class="name"><i class="iconfont icon-person"></i>张媛</span>
                        <button class="btn-check right-float">查看轨迹</button>
                    </div>
                    <div class="person-card-body">
                        <p>联系电话：<span>1832954632</span></p>
                        <p>所属网格：<span>陕西省-铜川市-王益区</span></p>
                    </div>
                    <div class="person-card-footer">
                        <img src="img/people.jpg">
                    </div>
                    <hr class="line">
                </div>
                <div class="person-card">
                    <div class="person-card-header">
                        <span class="name"><i class="iconfont icon-person"></i>张媛</span>
                        <button class="btn-check right-float">查看轨迹</button>
                    </div>
                    <div class="person-card-body">
                        <p>联系电话：<span>1832954632</span></p>
                        <p>所属网格：<span>陕西省-铜川市-王益区</span></p>
                    </div>
                    <div class="person-card-footer">
                        <img src="img/people.jpg">
                    </div>
                    <hr class="line">
                </div>
            </div>
            <div class="layui-side-scroll center-side">
                <!--楼层-->
                <div class="person-card">
                    <div class="person-card-header">
                        <span class="name"><i class="iconfont icon-qizhi"></i>新业小区1#楼</span>
                        <i class="iconfont icon-flower right-float icon-btn"></i>
                    </div>
                    <div class="person-card-body">
                        <p>xxx：<span>新业小区1#楼</span></p>
                        <p>地址：<span>铜川市王益区铜川饭 店附近 拷贝 2</span></p>
                    </div>
                    <hr class="line">
                </div>
                <div class="person-card">
                    <div class="person-card-header">
                        <span class="name"><i class="iconfont icon-qizhi"></i>新业小区1#楼</span>
                        <i class="iconfont icon-flower right-float icon-btn"></i>
                    </div>
                    <div class="person-card-body">
                        <p>xxx：<span>新业小区1#楼</span></p>
                        <p>地址：<span>铜川市王益区铜川饭 店附近 拷贝 2</span></p>
                    </div>
                    <hr class="line">
                </div>
            </div>
            <div class="layui-side-scroll center-side">
                <!--动态标绘-->
                <div class="person-card">
                    <div class="person-card-body card-body-full">
                        <div class="tools-btn">
                            <span class="tools-btn-active"><i class="iconfont icon-jc"></i>警车</span>
                            <span><i class="iconfont icon-xfc"></i>消防车</span>
                            <span><i class="iconfont icon-jhc"></i>救护车</span>
                            <span><i class="iconfont icon-zsj"></i>直升机</span>
                            <span><i class="iconfont icon-xfy"></i>消防员</span>
                            <span><i class="iconfont icon-td"></i>塔吊</span>
                            <span><i class="iconfont icon-lz"></i>路障</span>
                            <span><i class="iconfont icon-hy"></i>火源</span>
                            <span></span>
                        </div>
                    </div>
                    <hr class="line">
                </div>
            </div>
            <div class="layui-side-scroll center-side">
                <!--事件上报-->
                <div class="person-card">
                    <div class="person-card-header">
                        <span class="name"><i class="iconfont icon-qizhi"></i>违法广告牌</span>
                    </div>
                    <div class="person-card-body">
                        <p>地址：<span>陕西省铜川市王益区红旗街48号</span></p>
                        <p>发生时间：<span>2018年9月12日</span></p>
                        <p>当前状态：<span>已上报</span></p>
                    </div>
                    <hr class="line">
                </div>
                <div class="person-card">
                    <div class="person-card-header">
                        <span class="name"><i class="iconfont icon-qizhi"></i>违法广告牌</span>
                    </div>
                    <div class="person-card-body">
                        <p>地址：<span>陕西省铜川市王益区红旗街48号</span></p>
                        <p>发生时间：<span>2018年9月12日</span></p>
                        <p>当前状态：<span>已上报</span></p>
                    </div>
                    <hr class="line">
                </div>
            </div>
            <div class="layui-side-scroll center-side">
                <div id="eleTree">

                </div>
            </div>
            <div class="layui-side-scroll center-side">6</div>
            <div class="layui-side-scroll center-side">7</div>
            <div class="layui-side-scroll center-side">8</div>
        </div>

        <!--查看轨迹-->
        <!--<div class="layui-side layui-bg-black left-side" style="left: 103%;height: 60%">-->
            <!--jdjdjdj-->
        <!--</div>-->
    </div>
    <!--左侧菜单列表 end-->

    <!-- 地图内容主体区域 -->
    <div id="layui-body" class="layui-body layui-full" style="background: url(img/map.jpg) 100% 100%;">
      <span style="font-size: 40px;padding: 40%;display: block">地图区域</span>
    </div>

    <!--底部横向工具栏-->
    <div class="tools-bottom">
        <ul>
            <li><i class="iconfont icon-add"></i></li>
            <li><i class="iconfont icon-reduce"></i></li>
            <li><i class="iconfont icon-back"></i></li>
            <li><i class="iconfont icon-next"></i></li>
            <li><i class="iconfont icon-upDown"></i></li>
        </ul>
    </div>
    <!--底部横向工具栏-->

    <!--楼栋详情弹框start-->
    <div id="modal1" class="modal-frame" style="display: none" >
        <div class="modal-frame-body">
            <!--楼栋信息查询组件start-->
            <div class="layui-tab">
                <!--tab切换-layui-->
                <ul class="layui-tab-title body-top-side">
                    <li class="layui-this">概况</li>
                    <li>1单元</li>
                    <li>2单元</li>
                    <li>3单元</li>
                </ul>
                <!--tab内容-->
                <div class="layui-tab-content body-content-side calc-height">
                    <!--概况-->
                    <div class="layui-tab-item layui-show">
                        <!--概况-->
                        <table class="modal-table">
                            <tr>
                                <td>单元数</td>
                                <td>3个</td>
                            </tr>
                            <tr>
                                <td>楼层</td>
                                <td>(1单元）6层，（2单元）6层，（3单元）6层</td>
                            </tr>
                            <tr>
                                <td>户数</td>
                                <td>(1单元）12户，（2单元）12户，（3单元）12户</td>
                            </tr>
                            <tr>
                                <td>门禁视频</td>
                                <td><button class="btn-trans">门禁视频<i class="iconfont icon-video"></i></button></td>
                            </tr>
                            <tr>
                                <td>楼栋规划信息</td>
                                <td><button class="btn-trans">平面图纸<i class="iconfont icon-paper"></i></button></td>
                            </tr>
                            <tr>
                                <td>重点人群</td>
                                <td>（1单元）0人，（2单元）0人，（3单元）0人 </td>
                            </tr>
                            <tr>
                                <td>所属网格</td>
                                <td>陕西省-铜川市-王益区-红旗街道办事处</td>
                            </tr>
                            <tr>
                                <td>经纬度</td>
                                <td>109.04506300.35.05876937</td>
                            </tr>
                            <tr>
                                <td>筛选</td>
                                <td><div class="input-inline intable"><input type="text" class="full-width"><i class="iconfont icon-search pos-right"></i></div></td>
                            </tr>
                        </table>
                    </div>
                    <!--楼层信息-->
                    <div class="layui-tab-item">
                        <!--数据表格采用layui-table-->
                        这里是楼层table表格。。。。。
                    </div>
                    <div class="layui-tab-item">
                        <!--数据表格采用layui-table-->
                        <table class="modal-table">
                            <tr>
                                <td>1F</td>
                                <td>101室</td>
                                <td>102室</td>
                                <td>103室</td>
                                <td>104室</td>
                                <td>105室</td>
                                <td>106室</td>
                                <td>107室</td>
                                <td>108室</td>
                            </tr>
                            <tr>
                                <td>2F</td>
                                <td>201室</td>
                                <td>202室</td>
                                <td>203室</td>
                                <td>204室</td>
                                <td>205室</td>
                                <td>206室</td>
                                <td>207室</td>
                                <td>208室</td>
                            </tr>
                            <tr>
                                <td>3F</td>
                                <td>301室</td>
                                <td>302室</td>
                                <td>303室</td>
                                <td>304室</td>
                                <td>305室</td>
                                <td>306室</td>
                                <td>307室</td>
                                <td>308室</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <!--楼栋信息查询组件end-->
        </div>
    </div>
    <!--楼栋详情弹框end-->

    <!--视频监控弹框start-->
    <div id="modal2" class="modal-frame" style="display: none;">
        <!--<div class="modal-frame-title">-->
            <!--<span>范围分析</span>-->
        <!--</div>-->
        <!--<div class="modal-frame-btn" onclick="fadeOut('.show-dropDown')">-->
            <!--<i class="layui-icon layui-icon-close" style="cursor: pointer"></i>-->
        <!--</div>-->
        <div class="modal-frame-body">
            <!--视频区域start-->
            <div class="body-top-side" style="height: 70%;">
               <div style="width: 50%;height: 50%;display: inline-block;background: #212728;float: left;border: 1px solid #fff;">1</div>
               <div style="width: 50%;height: 50%;display: inline-block;background: #212728;float: left;border: 1px solid #fff;">2</div>
               <div style="width: 50%;height: 50%;display: inline-block;background: #212728;float: left;border: 1px solid #fff;">3</div>
               <div style="width: 50%;height: 50%;display: inline-block;background: #212728;float: left;border: 1px solid #fff;">4</div>
            </div>
            <!--视频区域 end-->

            <!--视频操作按钮区域start-->
            <div class="body-content-side bg-trans" style="height: calc(30% - 10px)">
               <div class="video-left-btn">
                   <span title="按钮"><i class="iconfont icon-video-open"></i></span>
                   <span title="按钮"><i class="iconfont icon-camera"></i></span>
                   <span title="按钮"><i class="iconfont icon-videotape"></i></span>
                   <span title="按钮"><i class="iconfont icon-video-close"></i></span>
               </div>
               <div class="video-center-btn">
                   云台控制：
                   <div style="position: relative;display: inline-block;padding: 35px 0;">
                       <span title="按钮"><i class="iconfont icon-arrow-left"></i></span>
                       <span title="按钮"><i class="iconfont icon-equal"></i></span>
                       <span title="按钮"><i class="iconfont icon-arrow-right"></i></span>
                       <span class="btn-arrow-down" title="按钮"><i class="iconfont icon-arrow-top"></i></span>
                       <span class="btn-arrow-top" title="按钮"><i class="iconfont icon-arrow-down"></i></span>
                   </div>
               </div>
               <div class="video-right-btn">
                   <div class="btn-group">
                       倍数调整：
                       <span title="按钮"><i class="iconfont icon-add"></i></span>
                       <span title="按钮"><i class="iconfont icon-reduce"></i></span>
                       <span title="按钮"><i class="iconfont icon-equal"></i></span>
                   </div>
                   <div class="btn-group">
                       光圈调整：
                       <span title="按钮"><i class="iconfont icon-add"></i></span>
                       <span title="按钮"><i class="iconfont icon-reduce"></i></span>
                       <span title="按钮"><i class="iconfont icon-equal"></i></span>
                   </div>
                   <div class="btn-group">
                       变焦调整：
                       <span title="按钮"><i class="iconfont icon-add"></i></span>
                       <span title="按钮"><i class="iconfont icon-reduce"></i></span>
                       <span title="按钮"><i class="iconfont icon-equal"></i></span>
                   </div>

               </div>
            </div>
            <!--视频操作按钮区域start-->
        </div>
    </div>
    <!--视频监控弹框end-->

    <!--右侧工具栏展开详细工具栏start-->
    <div id="modal3" class="modal-frame" style="display: none">
        <div class="modal-frame-body">
            <div class="tools-info">
                <span title="按钮"><i class="iconfont icon-company icon-btn"></i></span>
                <span title="按钮"><i class="iconfont icon-monitor icon-btn"></i></span>
                <span title="按钮"><i class="iconfont icon-jg icon-btn"></i></span>
            </div>
            <div class="tools-info">
                <span title="按钮"><i class="iconfont icon-park icon-btn"></i></span>
                <span title="按钮"><i class="iconfont icon-house icon-btn"></i></span>
                <span title="按钮"><i class="iconfont icon-public icon-btn"></i></span>
            </div>
            <div class="tools-info">
                <span class="btn-hz"><i class="iconfont icon-hz"></i>绘制</span>
                <span class="btn-qc"><i class="iconfont icon-qc"></i>清除</span>
            </div>
        </div>
    </div>
    <!--右侧工具栏展开详细工具栏end-->

    <!--动画控制--具体位置大小自行设置 start-->
    <div id="modal4" class="modal-frame" style="display: none">
        <div class="modal-frame-body">
            <table class="modal-table">
                <tr>
                    <td>动画时长：</td>
                    <td>
                        <form class="layui-form form-radio" action="">
                            <input type="radio" name="sex" value="10s" title="10秒" checked="">
                            <input type="radio" name="sex" value="30s" title="30秒">
                            <input type="radio" name="sex" value="2min" title="2分钟">
                            <input type="radio" name="sex" value="5min" title="5分钟">
                        </form>
                    </td>
                </tr>
                <tr>
                    <td>预览方式：</td>
                    <td>
                        <form class="layui-form form-radio" action="">
                            <input type="radio" name="sex" value="前视" title="前视" checked="">
                            <input type="radio" name="sex" value="俯视" title="俯视">
                            <input type="radio" name="sex" value="后视" title="后视">
                            <input type="radio" name="sex" value="浏览" title="浏览">
                        </form>
                    </td>
                </tr>
                <tr>
                    <td>开始时间：</td>
                    <td>
                        <div class="layui-input-inline date-inline">
                            <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>结束时间：</td>
                    <td>
                        <div class="layui-input-inline date-inline">
                            <input type="text" name="date" id="date1" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="set-btn">
                        <button class="btn-trans bg-blue">搜索</button>
                        <button class="btn-trans bg-blue">播放</button>
                        <button class="btn-trans bg-blue">暂停</button>
                        <button class="btn-trans bg-blue">继续</button>
                        <button class="btn-trans bg-blue">清除</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!--动画控制end-->

    <!--楼层导航条start-->
    <div class="floor-box">
        <div class="floor-box-header"><i  onclick="fadeOut('.floor-box')" class="layui-icon layui-icon-close"></i></div>
        <div class="floor-box-body">
            <ul>
                <li><a href="javascript:;">1F</a></li>
                <li><a href="javascript:;">19F</a></li>
                <li><a href="javascript:;">34F</a></li>
                <li><a href="javascript:;">98F</a></li>
                <li><a href="javascript:;">1F</a></li>
                <li><a href="javascript:;">1F</a></li>
                <li><a href="javascript:;">1F</a></li>
                <li><a href="javascript:;">1F</a></li>
                <li><a href="javascript:;">1F</a></li>
                <li><a href="javascript:;">1F</a></li>
            </ul>
        </div>
    </div>
    <!--楼层导航条end-->

    <!--sidebar-right start-->
    <div id="draggable" class="sidebar-right-box">
        <div class="sidebar-box-title">
            <span  onclick="dropDown('.sidebar-box-content')"><i class="iconfont icon-tools-box"></i>工具</span>
        </div>
        <div class="sidebar-box-content" style="display: none">
            <ul id="sidebar-right">
                <li  class="layui-this"><a href="javascript:;"><i class="iconfont icon-distance"></i>测距离</a></li>
                <li><a href="javascript:;"><i class="iconfont icon-area"></i>测面积</a></li>
                <li><a href="javascript:;"><i class="iconfont icon-height"></i>测高程</a></li>
                <li><a href="javascript:;"><i class="iconfont icon-clean"></i>清除</a></li>
                <li><a href="javascript:;"><i class="iconfont icon-draw"></i>绘制轨迹</a></li>
                <li><a href="javascript:;"><i class="iconfont icon-playback"></i>绘制回放</a></li>
                <li>
                    <a href="javascript:;"><i class="iconfont icon-area-ana"></i>范围分析</a>
                    <div class="show-dropDown">
                        <div class="modal-frame">
                            <div class="modal-frame-title">
                                <span>范围分析</span>
                            </div>
                            <!--<div class="modal-frame-btn" onclick="fadeOut('.show-dropDown')">-->
                                <!--<i class="layui-icon layui-icon-close" style="cursor: pointer"></i>-->
                            <!--</div>-->
                            <div class="modal-frame-body" style="height: calc(100% - 48px)">
                                <div class="tools-info">
                                    <span title="按钮"><i class="iconfont icon-company icon-btn"></i></span>
                                    <span title="按钮"><i class="iconfont icon-monitor icon-btn"></i></span>
                                    <span title="按钮"><i class="iconfont icon-jg icon-btn"></i></span>
                                </div>
                                <div class="tools-info">
                                    <span title="按钮"><i class="iconfont icon-park icon-btn"></i></span>
                                    <span title="按钮"><i class="iconfont icon-house icon-btn"></i></span>
                                    <span title="按钮"><i class="iconfont icon-public icon-btn"></i></span>
                                </div>
                                <div class="tools-info">
                                    <span class="btn-hz"><i class="iconfont icon-hz"></i>绘制</span>
                                    <span class="btn-qc"><i class="iconfont icon-qc"></i>清除</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><i class="iconfont icon-tile"></i>平铺</a></li>
            </ul>
        </div>
    </div>
    <!--sidebar-right end-->


</div>
<script src="layui-v2.4.5/layui/layui.js"></script>
<script>
    // JavaScript代码区域

    layui.config({
        base: "modules/"
    }).use(['element','form', 'layedit', 'laydate','layer','eleTree'], function(){
        var element = layui.element,
            form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,eleTree = layui.eleTree;
        var $ = layui.jquery;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        var data=[
            {
                id: 1,
                label: "安徽省",
                children: [
                    {
                        id: 2,
                        label: "马鞍山市",
                        children: [
                            {
                                id: 3,
                                label: "和县",
                                children:[{
                                    id: 31,
                                    label:'和县1'
                                },{
                                    id: 32,
                                    label:'和县2'
                                }]
                            },
                            {
                                id: 4,
                                label: "花山区",
                            }
                        ]
                    }
                ]
            },
            {
                id: 5,
                label: "河南省",
                children: [
                    {
                        id: 6,
                        label: "郑州市"
                    }
                ]
            }
        ];

        eleTree.render({
            elem: '#eleTree',
            data: data,
            showCheckbox: false,
            accordion: true,
            indent:20
        });

    });
    //拖拽
    $(function(){
        //拖拽
        interact('#draggable,.left-side-box,.floor-box').draggable({
            inertia: true,
            restrict: {
                restriction: "parent",
                endOnly: true,
                elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
            },
            autoScroll: false,
            onmove: dragMoveListener,
        });
    });

    function dragMoveListener(event) {
        var target = event.target,
            x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
            y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
        target.style.webkitTransform =
            target.style.transform =
                'translate(' + x + 'px, ' + y + 'px)';
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
        target.style.zIndex='1001';
        // console.log($(this).offset())
        // if(event.dx<240){
        //   $('.show-dropDown').css('left','auto').css('right','-240px');
        // }
    }

    function openModal(width,height,dom,title){
      width=parseFloat(width)>0?width:'893px';
      height=parseFloat(height)>0?height:'600px';
        layer.open({
            type: 1,
            title: title,
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            skin: 'demo-class',
            area: [width,height],
            content: $(dom)
        });
    }
    //轨迹播放
    function animation(){
        layer.open({
            type: 1,
            title: ['轨迹播放','font-size:0'],
            shadeClose: true,
            shade: false,
            // maxmin: true, //开启最大化最小化按钮
            area: ['440px','300px'],
            content: $('#modal4')
        });
    }

    //左侧菜单tips信息
    $(".btn-tips").hover(function (){
        layer.tips($(this).attr('btn-name'), $(this));
    });
    //左侧菜单点击图片切换，menu1.png——未选中，menu1-1.png——选中
    $(".btn-tips").on("click", function (){
        var i = $(this).index();
        var srcOld=$(this).siblings('.btn-tips').children('a').children('img');
        srcOld.each(function(){
            var src=$(this).attr('src');
            if(src.indexOf('-1.png')>0){
                $(this).attr('src',src.substring(0,src.indexOf('-1.png'))+'.png');
            }
        });
        var src=$(this).children('a').children('img').attr('src');
        if(src.indexOf('-1.png')<0){
            $(this).children('a').children('img').attr('src',src.substring(0,src.indexOf('.png'))+'-1.png');
        }
        $('.left-side').fadeIn();
        $(".center-side").eq(i).show().siblings('.center-side').hide();
    });

    //动态标绘点击样式切换
    $(".tools-btn>span").on("click", function (){
        var i = $(this).index();
        $(".tools-btn>span").eq(i).addClass("tools-btn-active").siblings().removeClass("tools-btn-active");
    });

    function menuToggle(){
        $('.left-side-box').fadeToggle('fast');
        $('#hamburger-1').toggleClass('is-active');
    }
    function dropDown(dom){
        $(dom).fadeToggle('fast');
    }
    function fadeIn(dom){
        $(dom).fadeIn('fast');
    }
    function fadeOut(dom){
        $(dom).fadeOut('fast');
    }
    $("#sidebar-right>li").on("click", function (){
        var i = $(this).index();
        $("#sidebar-right>li").eq(i).addClass("layui-this").siblings().removeClass("layui-this");
    });
</script>
</body>
</html>
